<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>后台登录</title>
    <!-- 页面标题logo -->
    <link rel="SHORTCUT ICON" href="favicon.ico">
    <!-- bootstrap CSS -->
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <!-- 图标库 CSS -->
    <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css">
    <!-- 文档CSS -->
    <link rel="stylesheet" href="less/index.css">
</head>

<body>
    <main id="main">
        <div class="left">
            <div class="user-info">
                <img src="images/18.jpg">
                <p>简桥</p>
            </div>
            <div class="list-group">
                <a href="index.html" class="list-group-item">
                    用户管理
                </a>
                <a href="#collapseExample" data-toggle="collapse" class="list-group-item">分类管理</a>
                <div class="collapse in category-manage" id="collapseExample">
                    <a href="firstCategory.html" class="list-group-item">一级</a>
                    <a href="#" class="list-group-item active">二级</a>
                </div>
                <a href="#" class="list-group-item">商品管理</a>
            </div>
        </div>
        <div class="right">
            <div class="title">
                <a href="#" class="fa fa-navicon btn-menu"></a>
                <a href="#" class="fa fa-sign-out btn-exit">退出</a>
            </div>
            <div class="content">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary btn-add" data-toggle="modal" data-target="#myModal">
                    添加品牌
                </button>

                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">添加分类</h4>
                            </div>
                            <div class="modal-body">
                                <div class="input-group">
                                    <span class="input-group-addon">选择分类</span>
                                    <!-- bootstrap表单都只需要添加一个form-control类名 -->
                                    <select name="" id="select-category" class="form-control select-category">
                                        <option value="1">女士馆</option>
                                    </select>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">品牌名称</span>
                                    <input type="text" class="form-control category-name brand-name" placeholder="请输入分类名称">
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">品牌图片</span>
                                    <input type="file" class="form-control category-name select-logo" placeholder="请选择图片">
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">图片预览</span>
                                    <img src="./images/1.png" alt="" class="brand-logo">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <!-- 如果点击保存需要关闭模态框添加属性data-dismiss="modal" -->
                                <button type="button" class="btn btn-primary btn-save" data-dismiss="modal">保存</button>
                            </div>
                        </div>
                    </div>
                </div>

                <table class="table table-striped table-hover user-info">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>品牌编号</th>
                            <th>品牌名称</th>
                            <th>品牌logo</th>
                            <th>所属分类</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>

                <nav>
                    <ul class="pagination" id="page">

                    </ul>
                </nav>
            </div>
        </div>
    </main>

    <!-- jQuery -->
    <script src="lib/jquery/jquery.js"></script>
    <!-- bootstrap JS -->
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <!-- 模板引擎 -->
    <script src="lib/artTemplate/template-web.js"></script>
    <!-- 分页插件 -->
    <script src="lib/bootstrap/js/bootstrap-paginator.js"></script>
    <!-- 文档JS -->
    <script src="js/secondCategory.js"></script>

    <!-- 模板 -->
    <script type="text/html" id="categorytpl">
        {{ each rows value i }}
        <tr>
            <th scope="row">{{ i + 1 }}</th>
            <td>{{ value.id }}</td>
            <td>{{ value.brandName }}</td>
            <td><img src="{{ value.brandLogo }}" alt=""></td>
            <td>{{ value.categoryName }}</td>
        </tr>
        {{ /each }}
    </script>
</body>

</html>